<script setup>
import LoginPageLogo from "@/components/LoginPageLogo.vue"
import router from "@/router/index.js"
import {ref} from 'vue'
import {getVerify} from "@/api/verify.js"
import {Message} from "@arco-design/web-vue"
import {encrypt} from "@/utils/encryption.js"
import {userLogin} from "@/api/user.js"
import {useUserStore} from "@/stores/index.js"
import ForgetPassword from "@/components/ForgetPassword.vue";

// 登录表单
const loginForm = ref({
  userAccount: '',
  userPassword: '',
  code: '',
  key:''
})
const base64Img = ref('')
const loginFormRef = ref()
const loginFormRules = ref(
  {
    userAccount: [
      { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    userPassword: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    code: [
      { required: true, message: '请输入验证码', trigger: 'blur' },
    ],
  }
)
const agree = ref(false)
const loginLoading = ref(false)

// 获取图形验证码
const getPicCode = () => {
  getVerify()
    .then(res => {
      if (res.data.code === 1) {
        loginForm.value.key = res.data.data.key
        base64Img.value = res.data.data.img
      }
    })
    .catch(err => {
      console.log(err)
    })
}
getPicCode()

// 提交登录表单
const submitLoginForm = () => {
  loginFormRef.value.validate(valid => {
    if (!valid) {
      if (agree.value === false) {
        Message.warning('请阅读用户协议')
        return false
      }
      const data = {
        userAccount: loginForm.value.userAccount,
        userPassword: encrypt(loginForm.value.userPassword),
        code: loginForm.value.code,
        key: loginForm.value.key
      }
      loginLoading.value = true
      userLogin(data)
        .then(res => {
          if (res.data.code === 1) {
            const userStore = useUserStore()
            userStore.updateUser(res.data.data)
            Message.success('登录成功')
            router.replace('/')
          }
        })
        .catch(err => {
          console.log(err)
        })
        .finally(()=> {
          loginLoading.value = false
        })
    } else {
      console.log('error submit!')
    }
  })
}
</script>

<template>
  <div id="login-page">
    <div class="login-form-container">
      <LoginPageLogo />
      <div class="content">
        <div class="title">
          <div class="text-1">账号登录</div>
          <div class="text-2">使用您注册过的账号登录</div>
        </div>
      </div>
      <div class="form">
        <a-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" :size="'large'">
          <a-form-item hide-label name="userAccount" field="userAccount" validate-trigger="blur">
            <a-input v-model="loginForm.userAccount" placeholder="请输入用户名"/>
          </a-form-item>
          <a-form-item hide-label name="userPassword" field="userPassword" validate-trigger="blur">
            <a-input-password v-model="loginForm.userPassword" placeholder="请输入密码"/>
          </a-form-item>
          <a-form-item hide-label name="picCode" field="code" validate-trigger="blur">
            <a-input v-model="loginForm.code" placeholder="请输入图形验证码(点击重新获取)"/>
            <img v-if="base64Img" :src="'data:image/png;base64,' + base64Img" alt="图形验证码" @click="getPicCode">
            <img v-else alt="图形验证码" src="../../assets/code_fail.png" @click="getPicCode">
          </a-form-item>
          <a-form-item hide-label>
            <a-checkbox value="1" v-model="agree"></a-checkbox>
            <div class="check-text">我已同意本站
              <router-link to="/agree">《用户协议》</router-link>
            </div>
          </a-form-item>
        </a-form>
        <a-button type="primary" long @click="submitLoginForm" :loading="loginLoading">登录</a-button>
        <div class="login-other">
          <forget-password></forget-password>
          <span @click="router.replace('/register/email')">前往注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#login-page {
  display: flex;
  justify-content: center;
  height: 100vh;
  background-color: var(--color-bg-1);
}

.login-form-container {
  margin-top: 50px;
  width: 400px;
}

.content {
  margin-top: 20px;
}

.content .title .text-1 {
  font-size: 20px;
  color: rgb(var(--arcoblue-6));
}

.content .title .text-2 {
  margin-top: 5px;
  font-size: 14px;
  color: var(--color-text-2);
}

.form {
  margin-top: 20px;
}

.form img {
  width: 110px;
  height: 36px;
}

.check-text {
  margin-left: 5px;
  font-size: 14px;
  color: var(--color-text-2);
}

.check-text a {
  text-decoration: none;
  color: rgb(var(--arcoblue-6));
}


.login-other {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-text-3);
}

@media (max-width: 768px) {
  .login-form-container {
    margin-top: 20px;
  }
}

@media (max-width: 576px) {
  .login-form-container {
    margin-top: 20px;
    width: 90%;
  }
}
</style>
